<template>
  <HeaderNav />
  <div class="sym-settings">
      <div class="top-view">
    <BaseSettings/>
    <SecureSettings/>
  </div>
  <div class="email-settings">
    <EmailSettings/>
  </div>
  </div>

</template>

<script setup>
import HeaderNav from '@/components/HeaderNav.vue'
import BaseSettings from "./components/BaseSettings.vue";
import SecureSettings from "./components/SecureSettings.vue";
import EmailSettings from "./components/EmailSettings.vue";
</script>

<style scoped lang="scss">
.sym-settings {
  height: 100vh;
  background-color: rgb(241, 248, 253);
  padding: 20px;
  .top-view{
    display: flex;
    gap: 12px;
  }
  .email-settings{
    margin-top: 10px;
  }
}

</style>
